<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel"> /* 此处一定要写babel */  
    //1.创建weather组件
    class Weather extends React.Component{         
        // constructor(props){
        //     super(props)           
        //     this.state = {
        //         isHot:true,
        //         wind:"微风"
        //     }            
        //     this.changeWeather = this.changeWeather.bind(this);           
        // }    
        state = {
                isHot:true,
                wind:"微风"
            }     
        render(){
            const {isHot,wind} = this.state;
            return <h1 id="title" onClick={this.changeWeather }>今天天气很{isHot?'炎热':'凉爽'},{wind}</h1>
        }
        //自定义方法 -- 要用赋值语句的形式+箭头函数        
        changeWeather=()=>{           
            const isHot = this.state.isHot;            
            this.setState({
                isHot:!isHot
            })
            //箭头函数没有自己的this,其内部的this,一定指向函数体外部,箭头函数声明的区域,因此指向Weather实例自身
            // console.log("this",this)
        }        
    }    
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Weather/>,document.getElementById('test'))    
   
    </script>
</body>

</html>